<!DOCTYPE html>
<html lang=zh-CN>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="google-site-verification" content="xBT4GhYoi5qRD5tr338pgPM5OWHHIDR6mNg1a3euekI" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta property="og:description" content="samuel-24276的博客">
    <meta property="og:type" content="website">
    <meta name="description" content="samuel-24276的博客">
    <meta name="keyword"  content="aircloud">
    <link rel="shortcut icon" href="/myblog/img/favicon.ico">

    <title>
        
        JavaScript学习日记（1） - samuel-24276的博客 | samuel-24276&#39;s Blog
        
    </title>

    <!-- Custom CSS -->
    
<link rel="stylesheet" href="/myblog/css/aircloud.css">

    
<link rel="stylesheet" href="/myblog/css/gitment.css">

    <!--<link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">-->
    <link href="//at.alicdn.com/t/font_620856_28hi1hpxx24.css" rel="stylesheet" type="text/css">
    <!-- ga & ba script hoook -->
    <script></script>
<meta name="generator" content="Hexo 7.1.1"></head>

<body>

<div class="site-nav-toggle" id="site-nav-toggle">
    <button>
        <span class="btn-bar"></span>
        <span class="btn-bar"></span>
        <span class="btn-bar"></span>
    </button>
</div>

<div class="index-about">
    <i> Like what you do, do what you like </i>
</div>

<div class="index-container">
    
    <div class="index-left">
        
<div class="nav" id="nav">
    <div class="avatar-name">
        <div class="avatar ">
            <img src="/myblog/img/avatar.jpg" />
        </div>
        <div class="name">
            <i>samuel-24276</i>
        </div>
    </div>
    <div class="contents" id="nav-content">
        <ul>
            <li >
                <a href="/myblog/">
                    <i class="iconfont icon-shouye1"></i>
                    <span>主页</span>
                </a>
            </li>
            <li >
                <a href="/myblog/tags">
                    <i class="iconfont icon-biaoqian1"></i>
                    <span>标签</span>
                </a>
            </li>
            <li >
                <a href="/myblog/archives">
                    <i class="iconfont icon-guidang2"></i>
                    <span>存档</span>
                </a>
            </li>
            <li >
                <a href="/myblog/collect/">
                    <i class="iconfont icon-shoucang1"></i>
                    <span>收藏</span>
                </a>
            </li>
            <li >
                <a href="/myblog/about/">
                    <i class="iconfont icon-guanyu2"></i>
                    <span>关于</span>
                </a>
            </li>
            
            <li>
                <a id="search">
                    <i class="iconfont icon-sousuo1"></i>
                    <span>搜索</span>
                </a>
            </li>
            
        </ul>
    </div>
    
        <div id="toc" class="toc-article">
    <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#JavaScript-%E5%9F%BA%E7%A1%80"><span class="toc-text">JavaScript 基础</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#JavaScript-%E5%88%B0%E5%BA%95%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F"><span class="toc-text">JavaScript 到底是什么？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E2%80%9CHello-World-%E2%80%9D%E7%A4%BA%E4%BE%8B"><span class="toc-text">“Hello World!”示例</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8F%91%E7%94%9F%E4%BA%86%E4%BB%80%E4%B9%88%EF%BC%9F"><span class="toc-text">发生了什么？</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#JavaScript-%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8"><span class="toc-text">JavaScript 快速入门</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8F%98%E9%87%8F%EF%BC%88Variable%EF%BC%89"><span class="toc-text">变量（Variable）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B3%A8%E9%87%8A"><span class="toc-text">注释</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="toc-text">运算符</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%9D%A1%E4%BB%B6%E8%AF%AD%E5%8F%A5"><span class="toc-text">条件语句</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%87%BD%E6%95%B0%EF%BC%88Function%EF%BC%89"><span class="toc-text">函数（Function）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BA%8B%E4%BB%B6"><span class="toc-text">事件</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AE%8C%E5%96%84%E7%A4%BA%E4%BE%8B%E7%BD%91%E9%A1%B5"><span class="toc-text">完善示例网页</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B7%BB%E5%8A%A0%E4%B8%80%E4%B8%AA%E5%9B%BE%E5%83%8F%E5%88%87%E6%8D%A2%E5%99%A8"><span class="toc-text">添加一个图像切换器</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B7%BB%E5%8A%A0%E4%B8%AA%E6%80%A7%E5%8C%96%E6%AC%A2%E8%BF%8E%E4%BF%A1%E6%81%AF"><span class="toc-text">添加个性化欢迎信息</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%94%A8%E6%88%B7%E5%90%8D%E4%B8%BA-null"><span class="toc-text">用户名为 null?</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%B0%8F%E7%BB%93"><span class="toc-text">小结</span></a></li></ol></li></ol>
</div>
    
</div>


<div class="search-field" id="search-field">
    <div class="search-bg" id="search-bg"></div>
    <div class="search-container">
        <div class="search-input">
            <span id="esc-search"> <i class="icon-fanhui iconfont"></i></span>
            <input id="search-input"/>
            <span id="begin-search">搜索</span>
        </div>
        <div class="search-result-container" id="search-result-container">

        </div>
    </div>
</div>

        <div class="index-about-mobile">
            <i> Like what you do, do what you like </i>
        </div>
    </div>
    
    <div class="index-middle">
        <!-- Main Content -->
        


<div class="post-container">
    <div class="post-title">
        JavaScript学习日记（1）
    </div>

    <div class="post-meta">
        <span class="attr">发布于：<span>2023-04-15 13:26:21</span></span>
        
        <span class="attr">标签：/
        
        <a class="tag" href="/myblog/tags/#前端" title="前端">前端</a>
        <span>/</span>
        
        <a class="tag" href="/myblog/tags/#JS" title="JS">JS</a>
        <span>/</span>
        
        
        </span>
        <span class="attr">访问：<span id="busuanzi_value_page_pv"></span>
</span>
</span>
    </div>
    <div class="post-content no-indent">
        <p>参考网站：<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript">JavaScript | MDN (mozilla.org)</a></p>
<h1 id="JavaScript-基础"><a href="#JavaScript-基础" class="headerlink" title="JavaScript 基础"></a>JavaScript 基础</h1><h2 id="JavaScript-到底是什么？"><a href="#JavaScript-到底是什么？" class="headerlink" title="JavaScript 到底是什么？"></a>JavaScript 到底是什么？</h2><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Glossary/JavaScript">JavaScript</a>（缩写：JS）是一门完备的<strong>动态编程语言</strong>。当应用于 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Glossary/HTML">HTML</a> 文档时，<strong>可为网站提供动态交互特性</strong>（例如：游戏、动态样式、动画以及在按下按钮或收到表单数据时做出的响应等）。由布兰登·艾克（Brendan Eich，Mozilla 项目、Mozilla 基金会和 Mozilla 公司的联合创始人）发明。</p>
<p>JavaScript 的应用场合极其广泛，简单到幻灯片、照片库、浮动布局和响应按钮点击，复杂到游戏、2D&#x2F;3D 动画、大型数据库驱动程序等等。</p>
<p>JavaScript 相当简洁，却非常灵活。开发者们基于 JavaScript 核心编写了大量实用工具，可以使 开发工作事半功倍。其中包括：</p>
<ul>
<li>浏览器应用程序接口（<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Glossary/API">API</a>）—— 浏览器内置的 API 提供了丰富的功能，比如：动态创建 HTML 和设置 CSS 样式、从用户的摄像头采集处理视频流、生成 3D 图像与音频样本等等。</li>
<li>第三方 API —— 让开发者可以在自己的站点中整合其他内容提供者（Twitter、Facebook 等）提供的功能。</li>
<li>第三方框架和库 —— 用来快速构建网站和应用。</li>
</ul>
<h2 id="“Hello-World-”示例"><a href="#“Hello-World-”示例" class="headerlink" title="“Hello World!”示例"></a>“Hello World!”示例</h2><p>读到这里你一定很激动，诚然 —— JavaScript 是最振奋人心的 Web 技术之一，而且在娴熟驾驭之后，你的网站在功能和创新力上将达到一个新的维度。</p>
<p>然而，JavaScript 比 HTML 和 CSS 学习起来更加复杂一点，所以必须一步一个脚印地学习。首先，来看看如何在页面中添加一些基本的 JavaScript 脚本来建造一个“Hello world!”示例。</p>
<p><strong>警告：</strong> 如果你没有完成之前的课程实践，可下载 <a target="_blank" rel="noopener" href="https://github.com/roy-tian/learning-area/raw/master/extras/getting-started-web/beginner-html-site-styled.zip">上一章节示例的压缩包</a> 并在本地解压作出发点。</p>
<ol>
<li><p>首先，打开你的测试站点，创建一个名为 <code>scripts</code> 的文件夹。然后在其中创建一个名为 main.js 的文件。</p>
</li>
<li><p>下一步，在<code>index.html</code>文件</body> 标签前的新行添加以下代码。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;scripts/main.js&quot;</span> <span class="attr">defer</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>与 CSS 的 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/link"><link></a> 元素类似，它将 JavaScript 引入页面以作用于 HTML（以及 CSS 等页面上所有内容）：</p>
</li>
<li><p>现在将以下代码添加到<code>main.js</code>文件中：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> myHeading = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;h1&#x27;</span>);</span><br><span class="line">myHeading.<span class="property">textContent</span> = <span class="string">&#x27;Hello world!&#x27;</span>;</span><br></pre></td></tr></table></figure>
</li>
<li><p>最后，保存 HTML 和 JavaScript 文件，用浏览器打开 <code>index.html</code>。可以看到如下内容：<img src="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics/hello-world.png" alt="img"></p>
</li>
</ol>
<p><strong>备注：</strong> 我们将 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/script">script</a> 放在 HTML 文件的底部附近的原因是<strong>浏览器会按照代码在文件中的顺序加载 HTML</strong>。如果先加载的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。因此，将 JavaScript 代码放在 HTML 页面的底部附近通常是最好的策略。</p>
<h3 id="发生了什么？"><a href="#发生了什么？" class="headerlink" title="发生了什么？"></a>发生了什么？</h3><p>JavaScript 把页面的标题改成了“Hello world!” 。首先用 <code>querySelector()</code> 函数获取标题的引用，并把它储存在 <code>myHeading</code> 变量中。这与 CSS 选择器的用法非常相像：若要对某个元素进行操作，首先得选择它。</p>
<p>之后，把 <code>myHeading</code> 变量的属性 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/API/Node/textContent"><code>textContent</code></a> （标题内容）修改为“Hello world!” 。</p>
<h2 id="JavaScript-快速入门"><a href="#JavaScript-快速入门" class="headerlink" title="JavaScript 快速入门"></a>JavaScript 快速入门</h2><p>我们来学习一些 JavaScript 的核心特性，从而更好地理解它的运行机制。学习这些知识很有意义，因为这些原理普遍适用于所有编程语言，掌握好它们，可以做到融会贯通。</p>
<p><strong>警告：</strong> 学习本节时，请尝试将示例代码输入到 JavaScript 控制台里看看会发生什么。JavaScript 控制台的更多信息请查看 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools">浏览器开发者工具</a>。</p>
<h3 id="变量（Variable）"><a href="#变量（Variable）" class="headerlink" title="变量（Variable）"></a><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/JavaScript_basics#%E5%8F%98%E9%87%8F%EF%BC%88variable%EF%BC%89">变量（Variable）</a></h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Glossary/Variable">变量</a> 是存储值的容器。**要声明一个变量，先输入关键字 <code>let</code> 或 <code>var</code>**，然后输入合适的名称：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> myVariable;</span><br></pre></td></tr></table></figure>

<p><strong>备注：</strong> 行末的分号表示当前语句结束，不过只有在单行内需要分割多条语句时，这个分号才是必须的。然而，一些人认为每条语句末尾加分号是一种好的风格。分号使用规则的更多细节请参阅 <a target="_blank" rel="noopener" href="http://news.codecademy.com/your-guide-to-semicolons-in-javascript/">JavaScript 分号使用指南</a>（英文页面）。</p>
<p><strong>备注：</strong> 几乎任何内容都可以作为变量名，但还是有一些限制（请参阅 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Grammar_and_types#%E5%8F%98%E9%87%8F">变量命名规则</a>）。如果你不确定，还可以 <a target="_blank" rel="noopener" href="https://mothereff.in/js-variables">验证变量名</a> 是否有效。</p>
<p><strong>备注：</strong> <strong>JavaScript 对大小写敏感</strong>，<code>myVariable</code> 和 <code>myvariable</code> 是不同的。如果代码出现问题了，先检查一下大小写！</p>
<p><strong>备注：</strong> 想要了解更多关于 <code>var</code> 和 <code>let</code> 的不同点，可以参阅 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/Variables#var_%E4%B8%8E_let_%E7%9A%84%E5%8C%BA%E5%88%AB">var 与 let 的区别</a>。</p>
<p>变量定义后可以进行赋值：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">myVariable = <span class="string">&#x27;李雷&#x27;</span>;</span><br></pre></td></tr></table></figure>

<p>也可以将定义、赋值操作写在同一行：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> myVariable = <span class="string">&#x27;李雷&#x27;</span>;</span><br></pre></td></tr></table></figure>

<p>可以直接通过变量名取得变量的值：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">myVariable;</span><br></pre></td></tr></table></figure>

<p>变量在赋值后是可以更改的：</p>
<figure class="highlight ebnf"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">let myVariable</span> = <span class="string">&#x27;李雷&#x27;</span>;</span><br><span class="line"><span class="attribute">myVariable</span> = <span class="string">&#x27;韩梅梅&#x27;</span>;</span><br></pre></td></tr></table></figure>

<p>注意变量可以有不同的 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Data_structures">数据类型</a> ：</p>
<table>
<thead>
<tr>
<th align="left">变量</th>
<th align="left">解释</th>
<th align="left">示例</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Glossary/String">String</a></td>
<td align="left">字符串（一串文本）：字符串的值必须用引号（单双均可，必须成对）扩起来。</td>
<td align="left"><code>let myVariable = &#39;李雷&#39;;</code></td>
</tr>
<tr>
<td align="left"><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Glossary/Number">Number</a></td>
<td align="left">数字：无需引号。</td>
<td align="left"><code>let myVariable = 10;</code></td>
</tr>
<tr>
<td align="left"><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Glossary/Boolean">Boolean</a></td>
<td align="left">布尔值（真 &#x2F; 假）： <code>true</code>&#x2F;<code>false</code> 是 JS 里的特殊关键字，无需引号。</td>
<td align="left"><code>let myVariable = true;</code></td>
</tr>
<tr>
<td align="left"><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Glossary/Array">Array</a></td>
<td align="left">数组：用于在单一引用中存储多个值的结构。</td>
<td align="left"><code>let myVariable = [1, &#39;李雷&#39;, &#39;韩梅梅&#39;, 10];</code> 元素引用方法：<code>myVariable[0]</code>, <code>myVariable[1]</code> ……</td>
</tr>
<tr>
<td align="left"><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Glossary/Object">Object</a></td>
<td align="left"><strong>对象：JavaScript 里一切皆对象，一切皆可储存在变量里</strong>。这一点要牢记于心。</td>
<td align="left"><code>let myVariable = document.querySelector(&#39;h1&#39;);</code> 以及上面所有示例都是对象。</td>
</tr>
</tbody></table>
<p>那么变量有什么用呢？我们说，编程时它们无所不在。如果值无法改变，那么就无法做任何动态的工作，比如发送个性化的问候，或是改变在图片库当前展示的图片。</p>
<h3 id="注释"><a href="#注释" class="headerlink" title="注释"></a><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/JavaScript_basics#%E6%B3%A8%E9%87%8A">注释</a></h3><p>类似于 CSS，JavaScript 中可以添加注释。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">这里的所有内容</span></span><br><span class="line"><span class="comment">都是注释。</span></span><br><span class="line"><span class="comment">*/</span></span><br></pre></td></tr></table></figure>

<p>如果注释只有一行，可以更简单地将注释放在两个斜杠之后，就像这样：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 这是一条注释。</span></span><br></pre></td></tr></table></figure>

<h3 id="运算符"><a href="#运算符" class="headerlink" title="运算符"></a><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/JavaScript_basics#%E8%BF%90%E7%AE%97%E7%AC%A6">运算符</a></h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Glossary/Operator">运算符</a> 是一类数学符号，可以根据两个值（或变量）产生结果。以下表格中介绍了一些最简单的运算符，可以在浏览器控制台里尝试一下后面的示例。</p>
<p><strong>备注：</strong> 这里说“根据<strong>两个</strong>值（或变量）产生结果”是不严谨的，计算两个变量的运算符称为“二元运算符”，还有一元运算符和三元运算符，下表中的“取非”就是一元运算符。</p>
<table>
<thead>
<tr>
<th align="left">运算符</th>
<th align="left">解释</th>
<th align="left">符号</th>
<th align="left">示例</th>
</tr>
</thead>
<tbody><tr>
<td align="left">加</td>
<td align="left">将两个数字相加，或拼接两个字符串。</td>
<td align="left"><code>+</code></td>
<td align="left"><code>6 + 9;&quot;Hello &quot; + &quot;world!&quot;;</code></td>
</tr>
<tr>
<td align="left">减、乘、除</td>
<td align="left">这些运算符操作与基础算术一致。只是乘法写作星号，除法写作斜杠。</td>
<td align="left"><code>-</code>, <code>*</code>, <code>/</code></td>
<td align="left"><code>9 - 3;8 * 2; //乘法在 JS 中是一个星号9 / 3;</code></td>
</tr>
<tr>
<td align="left">赋值运算符</td>
<td align="left">为变量赋值（你之前已经见过这个符号了）</td>
<td align="left"><code>=</code></td>
<td align="left"><code>let myVariable = &#39;李雷&#39;;</code></td>
</tr>
<tr>
<td align="left">等于</td>
<td align="left">测试两个值是否相等，并返回一个 <code>true</code>&#x2F;<code>false</code> （布尔）值。</td>
<td align="left"><code>===</code></td>
<td align="left"><code>let myVariable = 3;myVariable === 4; // false</code></td>
</tr>
<tr>
<td align="left">不等于</td>
<td align="left">和等于运算符相反，测试两个值是否不相等，并返回一个 <code>true</code>&#x2F;<code>false</code> （布尔）值。</td>
<td align="left"><code>!==</code></td>
<td align="left"><code>let myVariable = 3;myVariable !== 3; // false</code></td>
</tr>
<tr>
<td align="left">取非</td>
<td align="left">返回逻辑相反的值，比如当前值为真，则返回 <code>false</code>。</td>
<td align="left"><code>!</code></td>
<td align="left">原式为真，但经取非后值为 <code>false</code>： <code>let myVariable = 3;!(myVariable === 3); // false</code></td>
</tr>
</tbody></table>
<p>运算符种类远不止这些，不过目前上表已经够用了。完整列表请参阅 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators">表达式和运算符</a>。</p>
<p><strong>备注：</strong> <strong>不同类型数据之间的计算可能出现奇怪的结果，因此必须正确引用变量，才能得出预期结果</strong>。比如在控制台输入 <code>&quot;35&quot; + &quot;25&quot;</code>，为什么不能得到 <code>60</code>？因为引号将数字转换成了字符串，所以结果是连接两个字符串而不是把两个数字相加。输入 <code>35 + 25</code> 才能得到正确结果。</p>
<h3 id="条件语句"><a href="#条件语句" class="headerlink" title="条件语句"></a><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/JavaScript_basics#%E6%9D%A1%E4%BB%B6%E8%AF%AD%E5%8F%A5">条件语句</a></h3><p>条件语句是一种代码结构，用来测试表达式的真假，并根据测试结果运行不同的代码。一个常用的条件语句是 <code>if ... else</code>。下面是一个示例：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> iceCream = <span class="string">&#x27;chocolate&#x27;</span>;</span><br><span class="line"><span class="keyword">if</span> (iceCream === <span class="string">&#x27;chocolate&#x27;</span>) &#123;</span><br><span class="line">  <span class="title function_">alert</span>(<span class="string">&#x27;我最喜欢巧克力冰激淋了。&#x27;</span>);</span><br><span class="line">&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">  <span class="title function_">alert</span>(<span class="string">&#x27;但是巧克力才是我的最爱呀……&#x27;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><code>if ( ... )</code> 中的表达式进行测试，用（上文所提到的）等于运算符来比较变量 <code>iceCream</code> 与字符串 <code>&#39;chocolate&#39;</code> 是否相等。如果返回 <code>true</code>，则运行第一个代码块；如果返回 <code>false</code>，则跳过第一块直接运行 <code>else</code> 之后的第二个代码块。</p>
<h3 id="函数（Function）"><a href="#函数（Function）" class="headerlink" title="函数（Function）"></a><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/JavaScript_basics#%E5%87%BD%E6%95%B0%EF%BC%88function%EF%BC%89">函数（Function）</a></h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Glossary/Function">函数</a> 用来封装可复用的功能。如果没有函数，一段特定的操作过程用几次就要重复写几次，而使用函数则只需写下函数名和一些简短的信息。之前已经涉及过一些函数，比如：</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">let myVariable = document.querySelector(&#x27;h1&#x27;);</span><br><span class="line">alert(&#x27;hello!&#x27;);</span><br></pre></td></tr></table></figure>

<p><code>document.querySelector</code> 和 <code>alert</code> 是浏览器内置的函数，随时可用。</p>
<p><strong>如果代码中有一个类似变量名后加小括号 <code>()</code> 的东西，很可能就是一个函数。函数通常包括<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Glossary/Argument">参数</a>，参数中保存着一些必要的数据。它们位于括号内部，多个参数之间用逗号分开。</strong></p>
<p>比如， <code>alert()</code> 函数在浏览器窗口内弹出一个警告框，还应为其提供一个字符串参数，以告诉它警告框里要显示的内容。</p>
<p>好消息是：人人都能定义自己的函数。下面的示例是为两个参数进行乘法运算的函数：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">multiply</span>(<span class="params">num1, num2</span>) &#123;</span><br><span class="line">  <span class="keyword">let</span> result = num1 * num2;</span><br><span class="line">  <span class="keyword">return</span> result;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>尝试在控制台运行这个函数，不妨多试几组参数，比如：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">multiply</span>(<span class="number">4</span>, <span class="number">7</span>);</span><br><span class="line"><span class="title function_">multiply</span>(<span class="number">20</span>, <span class="number">20</span>);</span><br><span class="line"><span class="title function_">multiply</span>(<span class="number">0.5</span>, <span class="number">3</span>);</span><br></pre></td></tr></table></figure>

<p><strong>备注：</strong> <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/return"><code>return</code></a> 语句告诉浏览器当前函数返回 <code>result</code> 变量。这是一点很有必要，因为函数内定义的变量只能在函数内使用。这叫做变量的 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Glossary/Scope">作用域</a>。（详见 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Grammar_and_types#variable_scope">变量作用域</a>。）</p>
<h3 id="事件"><a href="#事件" class="headerlink" title="事件"></a><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/JavaScript_basics#%E4%BA%8B%E4%BB%B6">事件</a></h3><p>事件能为网页添加真实的交互能力。它可以捕捉浏览器操作并运行一些代码做为响应。最简单的事件是<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/API/Element/click_event">点击事件</a>，鼠标的点击操作会触发该事件。可尝试将下面的代码输入到控制台，然后点击页面的任意位置：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&quot;html&quot;</span>).<span class="title function_">addEventListener</span>(<span class="string">&quot;click&quot;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">  <span class="title function_">alert</span>(<span class="string">&quot;别戳我，我怕疼。&quot;</span>);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<p>将事件与元素绑定有许多方法。在这里选用了 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/html"><html></a> 元素，然后调用了它的 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener"><code>addEventListener()</code></a> 方法，将事件名称（<code>&#39;click&#39;</code>）以及其回调函数（当事件发生时，调用该函数）传入该函数中作为调用参数。</p>
<p>刚刚我们传递给 <code>addEventListener()</code> 的函数被称为<em>匿名函数</em>，因为它没有名字。*<em>匿名函数还有另一种我们称之为</em>箭头函数*的写法，箭头函数使用 <code>() =&gt;</code> 代替 <code>function ()</code>**：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;html&#x27;</span>).<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="title function_">alert</span>(<span class="string">&#x27;别戳我，我怕疼。&#x27;</span>);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h2 id="完善示例网页"><a href="#完善示例网页" class="headerlink" title="完善示例网页"></a><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/JavaScript_basics#%E5%AE%8C%E5%96%84%E7%A4%BA%E4%BE%8B%E7%BD%91%E9%A1%B5">完善示例网页</a></h2><p>现在你已经具备了一些 JavaScript 基础，下面来为示例网页添加一些更酷的特性。</p>
<h3 id="添加一个图像切换器"><a href="#添加一个图像切换器" class="headerlink" title="添加一个图像切换器"></a><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/JavaScript_basics#%E6%B7%BB%E5%8A%A0%E4%B8%80%E4%B8%AA%E5%9B%BE%E5%83%8F%E5%88%87%E6%8D%A2%E5%99%A8">添加一个图像切换器</a></h3><p>这里将用新的 DOM API 为网页添加另一张图片，并用 JavaScript 使图片在点击时进行切换。</p>
<ol>
<li><p>首先，找到另一张你想要在你的页面上展示的图片，且尺寸与第一张图片尽可能相同。</p>
</li>
<li><p>将这张图片储存在你的<code>images</code>目录下。</p>
</li>
<li><p>将图片重命名为’firefox2.png’（去掉引号）。</p>
</li>
<li><p>打开<code>main.js</code>文件，输入下面的 JavaScript 代码 ( 请删除刚才的 “hello world” 脚本)：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> myImage = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;img&#x27;</span>);</span><br><span class="line"></span><br><span class="line">myImage.<span class="property">onclick</span> = <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">let</span> mySrc = myImage.<span class="title function_">getAttribute</span>(<span class="string">&#x27;src&#x27;</span>);</span><br><span class="line">    <span class="keyword">if</span>(mySrc === <span class="string">&#x27;images/firefox-icon.png&#x27;</span>) &#123;</span><br><span class="line">      myImage.<span class="title function_">setAttribute</span>(<span class="string">&#x27;src&#x27;</span>, <span class="string">&#x27;images/firefox2.png&#x27;</span>);</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      myImage.<span class="title function_">setAttribute</span>(<span class="string">&#x27;src&#x27;</span>, <span class="string">&#x27;images/firefox-icon.png&#x27;</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>保存所有文件并用浏览器打开 <code>index.html</code> 。点击图片可以发现它能够切换了！</p>
</li>
</ol>
<p>这里首先把 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img"><img></a> 元素的引用存放在 <code>myImage</code> 变量里。然后将这个变量的 <code>onclick</code> 事件与一个匿名函数绑定。每次点击图片时：</p>
<ol>
<li>获取这张图片的 <code>src</code> 属性值。</li>
<li>用一个条件句来判断<code>src</code>的值是否等于原始图像的路径：<ol>
<li>如果是，则将 <code>src</code> 的值改为第二张图片的路径，并在 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img"><img></a> 内加载该图片。</li>
<li>如果不是（意味着它已经修改过）, 则把 <code>src</code> 的值重新设置为原始图片的路径，即原始状态。</li>
</ol>
</li>
</ol>
<h3 id="添加个性化欢迎信息"><a href="#添加个性化欢迎信息" class="headerlink" title="添加个性化欢迎信息"></a><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/JavaScript_basics#%E6%B7%BB%E5%8A%A0%E4%B8%AA%E6%80%A7%E5%8C%96%E6%AC%A2%E8%BF%8E%E4%BF%A1%E6%81%AF">添加个性化欢迎信息</a></h3><p>下面来添加另一段代码，在用户初次进入站点时将网页的标题改成一段个性化欢迎信息（即在标题中添加用户的名字）。名字信息会由 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Storage_API">Web Storage API</a> 保存下来，即使用户关闭页面之后再重新打开，仍可得到之前的信息。还会添加一个选项，可以根据需要改变用户名字以更新欢迎信息。</p>
<ol>
<li><p>打开 <code>index.html</code>，在 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/script">script</a> 标签<strong>前</strong>添加以下代码，将在页面底部显示一个“切换用户”字样的按钮：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;button&gt;切换用户&lt;/button&gt;</span><br></pre></td></tr></table></figure>
</li>
<li><p>将以下 JavaScript 代码原封不动添加到<code>main.js</code></p>
<p> 文件底部，将获取新按钮和标题的引用，并保存至变量中：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> myButton = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;button&#x27;</span>);</span><br><span class="line"><span class="keyword">let</span> myHeading = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;h1&#x27;</span>);</span><br></pre></td></tr></table></figure>
</li>
<li><p>然后添加以下函数来设置个性化欢迎信息。（函数需要在调用后生效，下文中提供了两种对该函数的调用方式）</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">setUserName</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="keyword">let</span> myName = <span class="title function_">prompt</span>(<span class="string">&#x27;请输入你的名字。&#x27;</span>);</span><br><span class="line">  <span class="variable language_">localStorage</span>.<span class="title function_">setItem</span>(<span class="string">&#x27;name&#x27;</span>, myName);</span><br><span class="line">  myHeading.<span class="property">textContent</span> = <span class="string">&#x27;Mozilla 酷毙了，&#x27;</span> + myName;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>该函数首先调用了 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/API/Window/prompt"><code>prompt()</code></a> 函数，与 <code>alert()</code> 类似会弹出一个对话框。但是这里需要用户输入数据，并在确定后将数据存储在 <code>myName</code> 变量里。接下来将调用 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage"><code>localStorage</code></a> API，它可以将数据存储在浏览器中供后续获取。这里用 <code>localStorage</code> 的 <code>setItem()</code> 函数来创建一个<code>&#39;name&#39;</code> 数据项，并把 <code>myName</code> 变量复制给它。最后将 <code>textContent</code> 属性设置为一个欢迎字符串加上这个新设置的名字。</p>
</li>
<li><p>接下来，添加以下的<code>if ... else</code>块。我们可以称之为初始化代码，因为它在页面初次读取时进行构造工作：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span>(!<span class="variable language_">localStorage</span>.<span class="title function_">getItem</span>(<span class="string">&#x27;name&#x27;</span>)) &#123;</span><br><span class="line">  <span class="title function_">setUserName</span>();</span><br><span class="line">&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">  <span class="keyword">let</span> storedName = <span class="variable language_">localStorage</span>.<span class="title function_">getItem</span>(<span class="string">&#x27;name&#x27;</span>);</span><br><span class="line">  myHeading.<span class="property">textContent</span> = <span class="string">&#x27;Mozilla 酷毙了，&#x27;</span> + storedName;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>这里首次使用了取非运算符（逻辑非，用!表示）来检测’name’数据是否存在。若不存在，调用<code>setUserName()</code>创建。若存在（即用户上次访问时设置过），调用<code>getItem()</code>获取保存的名字，像上文的<code>setUserName()</code>那样设置<code>textContent</code>。</p>
</li>
<li><p>最后，为按钮设置 onclick 事件处理器。按钮按下时运行 setUserName() 函数。这样用户就可以通过按这个按钮来自由设置新名字了：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">myButton.<span class="property">onclick</span> = <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">   <span class="title function_">setUserName</span>();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ol>
<p>第一次访问网页时，页面将询问用户名并发出一段个性化的信息。可随时点击按钮来改变用户名。告诉你一个额外的福利，<strong>因为用户名是保存在 <code>localStorage</code> 里的，网页关闭后也不会丢失，所以重新打开浏览器时所设置的名字信息将依然存在</strong>。</p>
<h3 id="用户名为-null"><a href="#用户名为-null" class="headerlink" title="用户名为 null?"></a><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/JavaScript_basics#%E7%94%A8%E6%88%B7%E5%90%8D%E4%B8%BA_null">用户名为 null?</a></h3><p>运行示例代码，弹出输入用户名的对话框，试着按下 取消 按钮。此时标题会显示为“Mozilla 酷毙了，null”。这是因为取消提示对话框后值将设置为 <code>null</code>，这是 JavaScript 中的一个特殊值，表示引用不存在。</p>
<p>也可以不输入任何名字直接按 确认，你的标题会显示为“Mozilla 酷毙了，”，原因么显而易见。</p>
<p>要避免这些问题，应该更新 <code>setUserName()</code> 来检查用户是否输入了 <code>null</code> 或者空名字：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">setUserName</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="keyword">let</span> myName = <span class="title function_">prompt</span>(<span class="string">&#x27;请输入你的名字。&#x27;</span>);</span><br><span class="line">  <span class="keyword">if</span>(!myName) &#123;</span><br><span class="line">    <span class="title function_">setUserName</span>();</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="variable language_">localStorage</span>.<span class="title function_">setItem</span>(<span class="string">&#x27;name&#x27;</span>, myName);</span><br><span class="line">    myHeading.<span class="property">textContent</span> = <span class="string">&#x27;Mozilla 酷毙了，&#x27;</span> + myName;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>用人话说就是：如果 <code>myName</code> 没有值或值为 <code>null</code>，就再次从头运行<code>setUserName()</code>。如果有值（上面的表达式结果不为真），就把值存储到 <code>localStorage</code> 并且设置标题。</p>
<h2 id="小结"><a href="#小结" class="headerlink" title="小结"></a><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/JavaScript_basics#%E5%B0%8F%E7%BB%93">小结</a></h2><p>如果你按部就班完成本文的实践，那么最终可以得到以下页面（可以 <a target="_blank" rel="noopener" href="https://roy-tian.github.io/learning-area/extras/getting-started-web/beginner-html-site-scripted/">查看我们的版本</a>）：</p>
<p><img src="https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/JavaScript_basics/beginner-site-scripted.png" alt="测试页面，添加了 一个 js 脚本，可以显示用户名、更改 Firefox 图片。"></p>
<p>若遇到问题，可以参考 GitHub 上的 <a target="_blank" rel="noopener" href="https://github.com/roy-tian/learning-area/tree/master/extras/getting-started-web/beginner-html-site-scripted">完整示例代码</a> 进行对比。</p>
<hr>

        
            <div class="donate-container">
    <div class="donate-button">
        <button id="donate-button">赞赏</button>
    </div>
    <div class="donate-img-container hide" id="donate-img-container">
        <img id="donate-img" src="" data-src="/myblog/img/donate.jpg">
        <p> 感谢鼓励 </p>
    </div>
</div>
        
        <br />
        <div id="comment-container">
        </div>
        <div id="disqus_thread"></div>
        <div id="lv-container"></div>
        <div class="giscus"></div>
    </div>
</div>

    </div>
</div>


<footer class="footer">
    <ul class="list-inline text-center">
        
        

        

        

        
        <li>
            <a target="_blank"  href="https://github.com/samuel-24276">
                            <span class="fa-stack fa-lg">
                                <i class="iconfont icon-github"></i>
                            </span>
            </a>
        </li>
        

        

    </ul>
    
    <p>
        <span>/</span>
        
        <span><a target="_blank" rel="noopener" href="https://github.com/samuel-24276">samuel-24276&#39;s Page</a></span>
        <span>/</span>
        
        <span><a target="_blank" rel="noopener" href="https://beian.miit.gov.cn/">北京-未备案</a></span>
        <span>/</span>
        
        <span><a href="#">返回顶部</a></span>
        <span>/</span>
        
    </p>
    
    <p>
        <span id="busuanzi_container_site_pv">
            <span id="busuanzi_value_site_pv"></span>PV
        </span>
        <span id="busuanzi_container_site_uv">
            <span id="busuanzi_value_site_uv"></span>UV
        </span>
        Created By <a target="_blank" rel="noopener" href="https://hexo.io/">Hexo</a>  Theme <a target="_blank" rel="noopener" href="https://github.com/aircloud/hexo-theme-aircloud">AirCloud</a></p>
</footer>




</body>

<script>
    // We expose some of the variables needed by the front end
    window.hexo_search_path = "search.json"
    window.hexo_root = "/myblog/"
    window.isPost = true
</script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

<script src="/myblog/js/index.js"></script>

<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>






    <script type="text/javascript">
       (function() {
           if (typeof LivereTower === 'function') { return; }

           var j, d = document.getElementById('lv-container');

           d.setAttribute('data-id','city');
           d.setAttribute('data-uid' , 'MTAyMC80OTA5OC8yNTU5Mw==');

           j = document.createElement('script');
           j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
           j.async = true;

           d.appendChild(j);
       })();
    </script>
    <noscript>为正常使用来必力评论功能请激活JavaScript</noscript>
    </div>

</html>
